<template>
  <div>
    <!-- 使用路由占位  -->
   <router-view></router-view>
   <button @click="setList">添加</button>
   <button @click="setName">修改</button>
   <ul>
     <!-- v-for的优先级比 v-if 高 所以开发时二者不可一起使用-->
     <!-- 不浪费性能  -->
     <!-- 解决方式 : 使用计算属性 -->
     <li v-for="item in newList" :key="item" > {{item}} </li>
   </ul>
   xm:{{person.name}}
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 数据响应式 数据 变 视图变
      // 有两种特殊情况
      // 1.数组通过数组索引(小标) 直接修改数据 数据不是响应式的 数据会变 但是不会影响视图
      // 2.对象新增的属性
      list: [1, 2, 3, 4],
      person: {}
    }
  },
  computed: {
    newList () {
      return this.list.filter(item => item % 2 === 0)
    }
  },
  created () {

  },

  methods: {
    setList () {
      // 错误写法
      // this.list[1] = 5
      // 修改的是数组
      // 第一个参数 : 要修改的数组
      // 第二个参数 : 索引
      // 第三个参数 : 修改的值
      this.$set(this.list, 1, 5)
    },
    setName () {
      // this.person.name = 'zhangsan1'
      // 第一个参数 : 对象
      // 第二个参数 : key
      // 第三个参数 : value
      this.$set(this.person, 'name', 'zhangsan1')
    }
  }
}
</script>

<style scoped>
</style>
